<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox wdh-100 userinfo jus">
			模版名称：<input style="font-size: 28rpx;" v-model="name" placeholder-class="reg-pl" class="u-input"
				placeholder="请填写模版名称" />
		</view>

		<view class="wdh-100 columnbox userinfo" style="margin-top: 20rpx;">
			<view class="wdh-100">药店</view>
			<view class="rowbox wdh-100 spb store-box" @click="changeStore">
				<view class="rowbox">
					<image class="store-img" :src="storeList[curStore].logo" mode="aspectFill"></image>
					<view class="store-name">{{storeList[curStore].name||'暂无药房名称'}}</view>
				</view>
				<view class="rowbox def-col change-store">切换药店
					<view style="margin-left: 4rpx;">
						<u-icon name="arrow-right" size="24rpx" color="#00b6b2"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="wdh-100 columnbox userinfo" style="margin-top: 20rpx;">
			<view class="rowbox wdh-100 spb als ">
				<image mode="aspectFill" class="cf-img"
					src="https://img2.baidu.com/it/u=4273482966,3520658106&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427">
				</image>
				<view class="columnbox als cf-jx">
					<view class="cf-jx-name" v-if="jixing!=''">{{jixing.jixing}}</view>
					<view v-else>请选择剂型</view>
					<view class="rowbox cf-jx-jgmx" @click="">修改药材后查看价格
						<u-icon name="arrow-right" size="20rpx"></u-icon>
					</view>
				</view>
				<picker @change="jxChange" mode="selector" :range="jxList" range-key="name">
					<view class="def-bgcol change-btn">选择剂型</view>
				</picker>
			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 40rpx;color: #dddddd;">
				<view class="def-col set-btn" @click="exportChuFang">导入处方</view>
				<text style="margin:0 20rpx;">｜</text>
				<view class="def-col set-btn" @click="clearChufang">清空处方</view>
			</view>
			<view class="columnbox wdh-100 manage-box">
				<view class="rowbox wdh-100 cf-name">
					Rp：<text v-if="chufang.name!=''">{{chufang.name}}</text>
					<!-- <input v-model="chufang.name" placeholder="请输入" /> -->
				</view>
				<view class="yf-box" v-if="chufang.cfList&&chufang.cfList.length>0">
					<view class="wdh-100 wz-detail">
						<text style="margin-right: 20rpx;" v-for="(item,index) in chufang.cfList"
							:key='index'>{{item}}</text>
					</view>
				</view>
			</view>
			<view class="def-col rowbox edit-yc-btn" @click="editYaocai">编辑药材</view>
		</view>

		<view style="height: 200rpx;width: 100%;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view class="def-bgcol rowbox send-btn wdh-100" @click="saveModel">保存</view>
		</view>

		<!-- 选择药店 -->
		<u-popup mode="bottom" :show='storeFlag' :duration="100" @close="storeFlag=false" round="20rpx" closeable>
			<view class="shop-c-box">选择药房</view>
			<scroll-view scroll-y style="height: 50vh;">
				<view @click="chooseStore(index)" v-for="(item,index) in storeList" :key='index'
					class="rowbox spb c-one-shop">
					<view class="rowbox">
						<image :src="item.logo" mode="aspectFill" class="shop-img"></image>
						<view class="columnbox als">
							<view>{{item.name||'暂无名称'}}</view>
							<view class="shop-address">{{item.province}}{{item.city}}{{item.county}}</view>
						</view>
					</view>
					<u-icon v-if="index==curStore" name="checkmark-circle-fill" color="#00b6b2" size="40rpx"></u-icon>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				jxList: [],
				jixing: '',
				chufang: {
					name: '',

				}, //处方
				submitflag: false,
				storeList: [],
				curStore: 0,
				storeFlag: false
			};
		},
		onLoad() {
			// this.getJixing()
			this.getStore()
		},
		methods: {
			changeStore() {
				this.storeFlag = true
				this.getJixing()
			},
			getStore() {
				this.$req.post('/doctor/pharmacys').then(res => {
					this.storeList = res.data.data
					this.getJixing()
				})
			},
			//剂型列表
			getJixing() {
				this.$req.post('/doctor/jixinglist', {
					pharmacyid: this.storeList[this.curStore].id * 1
				}).then(res => {
					this.jxList = res.data.data
					this.jixing = {
						jixing: this.jxList[0].name,
						jixingid: this.jxList[0].id,
					}
				})
			},
			clearChufang() {
				this.chufang = {
					name: ''
				}
			},
			//剂型列表
			getJixing() {
				this.$req.post('/doctor/jixings').then(res => {
					this.jxList = res.data.data
					this.jixing = {
						jixing: this.jxList[0].name,
						jixingid: this.jxList[0].id,
					}
				})
			},
			// 导入处方
			exportChuFang() {
				uni.navigateTo({
					url: '/packageA/yaofang/chufang'
				})
			},
			jxChange(e) {
				this.jixing = {
					jixing: this.jxList[e.detail.value].name,
					jixingid: this.jxList[e.detail.value].id
				}
				this.chufang = {
					name: ''
				}
			},
			//编辑药材
			editYaocai() {
				if (!this.chufang.cfList || this.chufang.cfList.length == 0) {
					uni.navigateTo({
						url: '/packageA/yaofang/editYaocai?sotreId=' + this.storeList[this.curStore].id +
							'&jixingid=' + this.jixing.jixingid
					})
				} else {
					uni.navigateTo({
						url: '/packageA/yaofang/editYaocai?info=' + JSON.stringify(this.chufang) + '&sotreId=' +
							this
							.storeList[this.curStore].id + '&jixingid=' + this.jixing.jixingid
					})
				}
			},
			//存模版
			saveModel() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入模版名称',
						icon: 'none'
					})
					return
				}
				if (!this.chufang.Yaofangdrug) {
					uni.showToast({
						title: '请编辑药材',
						icon: 'none'
					})
					return
				}
				if (!this.submitflag) {
					this.submitflag = true
					uni.showLoading({
						title: '正在保存',
						mask: true
					})
					let list = []
					this.chufang.Yaofangdrug.forEach(v => {
						list.push({
							chinesedrug: v.chinesedrug,
							gram: v.gram,
							chinesedrugid: v.chinesedrugid
						})
					})
					this.$req.post('/doctor/yaofangadd', {
						name: this.name,
						doctorid: uni.getStorageSync('uid'),
						parameter: JSON.stringify(list),
						jixingid: this.jixing.jixingid,
						jixing: this.jixing.jixing,
					}).then(res => {
						this.submitflag = false
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							success: () => {
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}
						})
					})
				}
			},
			chooseStore(index) {
				if (this.curStore != index) {
					this.curStore = index
					this.chufang = {
						name: ''
					}
				}
				this.storeFlag = false
			},
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
		font-family: PingFang SC;
		padding: 0 20rpx;
	}

	.userinfo {
		font-size: 28rpx;
		color: #232323;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}

	.cf-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.cf-jx {
		min-height: 100rpx;
		width: 400rpx;
		justify-content: space-between;
		font-size: 28rpx;

		.cf-jx-name {
			color: #232323;
			width: 100%;
		}

		.cf-jx-jgmx {
			font-size: 24rpx;
			color: #8998A6;
		}
	}

	.change-btn {
		font-size: 22rpx;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 4rpx;
	}

	.manage-box {
		margin-top: 40rpx;
		background: #F9F9F9;
		border-radius: 10rpx;
	}

	.cf-name {
		background: #F9F9F9;
		padding: 32rpx 20rpx;
		width: 100%;
		justify-content: flex-start;
		font-size: 32rpx;
		font-weight: bold;

		input {
			margin-left: 10rpx;
			width: 500rpx;
			font-size: 32rpx;
		}
	}

	.yf-box {
		background: #F9F9F9;
		padding: 32rpx 20rpx;
		border-radius: 10rpx;
		width: 100%;
		margin-top: 0rpx;
		padding-top: 10rpx;

		.wz-detail {
			color: #4c4d4d;
		}
	}

	.edit-yc-btn {
		border: #00b6b2 solid 1px;
		width: 100%;
		height: 70rpx;
		margin-top: 40rpx;
		background: rgba(#5bb6ac, .1);
	}

	.store-box {
		border-top: #eff3f6 solid 1px;
		padding-top: 20rpx;
		margin-top: 20rpx;
		font-size: 28rpx;

		.change-store {
			margin-left: 20rpx;
		}

		.store-img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 4px;
		}

		.store-name {
			margin-left: 20rpx;
		}
	}

	.shop-c-box {
		padding: 32rpx 0;
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;

	}

	.c-one-shop {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-bottom: #F5F7F9 solid 1px;

		.shop-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.shop-address {
			font-size: 24rpx;
			color: #7c7d7d;
			margin-top: 20rpx;
		}
	}
</style>